<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show1 = true">展示弹出层</fu-button>
        <fu-popup v-model:show="show1">
          <view class="popup-content">内容</view>
        </fu-popup>
      </view>
    </view>
    
    <!-- 弹出位置 -->
    <view class="demo-block">
      <view class="demo-block__title">弹出位置</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show2 = true">顶部弹出</fu-button>
        <fu-button type="primary" @click="show3 = true">底部弹出</fu-button>
        <fu-button type="primary" @click="show4 = true">左侧弹出</fu-button>
        <fu-button type="primary" @click="show5 = true">右侧弹出</fu-button>
        
        <fu-popup v-model:show="show2" position="top">
          <view class="popup-content">顶部内容</view>
        </fu-popup>
        
        <fu-popup v-model:show="show3" position="bottom">
          <view class="popup-content">底部内容</view>
        </fu-popup>
        
        <fu-popup v-model:show="show4" position="left">
          <view class="popup-content">左侧内容</view>
        </fu-popup>
        
        <fu-popup v-model:show="show5" position="right">
          <view class="popup-content">右侧内容</view>
        </fu-popup>
      </view>
    </view>
    
    <!-- 圆角弹窗 -->
    <view class="demo-block">
      <view class="demo-block__title">圆角弹窗</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show6 = true">圆角弹窗</fu-button>
        <fu-popup 
          v-model:show="show6" 
          position="bottom"
          round
        >
          <view class="popup-content">圆角内容</view>
        </fu-popup>
      </view>
    </view>
    
    <!-- 关闭图标 -->
    <view class="demo-block">
      <view class="demo-block__title">关闭图标</view>
      <view class="demo-block__content">
        <fu-button type="primary" @click="show7 = true">关闭图标</fu-button>
        <fu-popup v-model:show="show7">
          <view class="popup-content">
            <text>内容</text>
            <text class="popup-close" @click="show7 = false">×</text>
          </view>
        </fu-popup>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    background-color: #fff;
    padding: 30rpx;
    border-radius: var(--fu-radius-base);
    
    .fu-button {
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.popup-content {
  position: relative;
  padding: 30rpx;
  min-width: 200rpx;
  min-height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fu-font-size-base);
  color: var(--fu-text-color);
}

.popup-close {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 40rpx;
  color: var(--fu-text-color-secondary);
  cursor: pointer;
  
  &:active {
    color: var(--fu-text-color);
  }
}
</style> 